<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset=utf-8"utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title th:text="${title}"></title>
    <!--<meta name="description" content="在此之前我有写过一篇如何使用我博客模板的文章 请先看这篇基础集成，这篇文章主要讲的是如何使用和修改我的博客主题，文章内容含以下几点：">-->
    <meta name="author" content="lygoup@163.com">
    <meta name="twitter:card" content="summary">
    <meta name="twitter:title" th:content="${title}">
    <meta name="twitter:description" content="在此之前我有写过一篇如何使用我博客模板的文章 请先看这篇基础集成，这篇文章主要讲的是如何使用和修改我的博客主题，文章内容含以下几点：">
    <meta property="og:type" content="article">
    <meta property="og:title" th:content="${title}">
    <meta property="og:description" content="在此之前我有写过一篇如何使用我博客模板的文章 请先看这篇基础集成，这篇文章主要讲的是如何使用和修改我的博客主题，文章内容含以下几点：">
    <link rel="icon" type="image/png" th:href="@{/images/favorite.png}" sizes="16×16"/>
    <link th:href="@{/images/favorite.png}" rel="shortcut icon" type="image/png">
    <link rel="stylesheet" th:href="@{/css/main.css}">
    <link th:href="@{/css/font-awesome.min.css}" rel="stylesheet">
    <!--评论资源引入-->
    <link rel="stylesheet" type="text/css" th:href="@{/css/semantic.min.css}">
    <!--评论资源引入end-->
    <script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
    <script>
        function dashangToggle() {
            $(".hide_box-play").fadeToggle();
            $(".shang_box-play").fadeToggle();
        }

        function settingToggle() {
            $(".hide_box-setting").fadeToggle();
            $(".shang_box-setting").fadeToggle();
        }

        function settingCommentInfo() {


            $(".hide_box-setting").fadeToggle();
            $(".shang_box-setting").fadeToggle();
        }

    </script>
    <style>
        p {
            line-height: 30px;
        }

        body {
            /*zoom: 90%;*/
        }
    </style>
    <!--纯白/护眼begin-->
    <style type="text/css">
        .contentBoxS {
            /*border: 1px solid #E3E3E3;*/
            width: 64px;
            border-radius: 30px;
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
            -khtml-user-select: none;
            -o-user-select: none;
            user-select: none;
            font-size: 10px;

        }

        .btnBoxS {
            width: 64px;
            height: 28px;
            border-radius: 30px;
            -webkit-border-radius: 30px;
            -moz-border-radius: 30px;
            background-color: grey;
            position: relative;
            cursor: pointer;
            display: flex;
            justify-items: center;
            align-items: center;
        }

        #btn {
            width: 21px;
            height: 21px;
            left: 3px;
            border: 1px solid #E3E3E3;
            border-radius: 30px;
            -webkit-border-radius: 30px;
            -moz-border-radius: 30px;
            background-color: #fff;
            position: absolute;
        }

        .off {
            display: inline-block;
            text-align: left;
            padding-left: 32px;
        }

        .on {
            display: none;
            text-align: left;
            padding-left: 8px;
        }

        .changeColorTurn {
            animation: colorTurn 300ms ease forwards;
        }

        /*开启按钮*/
        @keyframes colorTurn {
            /*按钮最开始颜色*/
            from {
                background-color: rgb(185,211,238);
            }
            /*按钮最终颜色*/
            to {
                background-color: #409EFF;

            }
        }

        /*动画时间-----300ms*/
        .changeColorOn {
            animation: colorOn 3000ms ease forwards;
        }

        /*关闭按钮*/
        @keyframes colorOn {
            /*按钮最开始颜色*/
            from {
                background-color: #409EFF;
            }

            /*按钮最终颜色*/
            to {
                background-color: rgb(185,211,238);
            }
        }

        .addColor{
            color: white!important;
        }

        .addRed{
            color: red!important;
        }
        /*.addChangeColor{*/
        /*    color: rgb(153,153,153)!important;*/
        /*}*/
        /*.addChangeColor:hover{*/
        /*    color: white!important;*/
        /*}*/
    </style>
    <!--纯白/护眼end-->
</head>
<body>
<span class="mobile btn-mobile-menu">
    <div class="nav_container">
        <nav class="nav-menu-item" style="float:right"><i class="nav-menu-item">
            <a th:href="@{/index}" title="" class="blog-button">  博客主页</a>
        </i>
            <i class="nav-menu-item">
                <a th:href="@{/allArticle}" title="archive" class="btn-mobile-menu__icon">所有文章</a>
            </i>
            <i class="nav-menu-item">
                <a th:href="@{/label}" title="tags" class="btn-mobile-menu__icon">标签</a>
            </i>
            <i class="nav-menu-item">
                <a th:href="@{/TechSupport}" title="support" class="btn-mobile-menu__icon">技术支持</a>
            </i>
            <i class="nav-menu-item">
                <a th:href="@{/aboutme}" title="about" class="btn-mobile-menu__icon">关于我</a>
            </i>
        </nav>
    </div>
</span>

<!--panel-cover--collapsed不要动这个属性-->
<header class="panel-cover panel-cover--collapsed" style="background-image: url('../images/background-cover.jpg')">
    <div class="panel-main">
        <div class="panel-main__inner panel-inverted">
            <div class="panel-main__content">
                <!-- 头像效果-start -->
                <div class="ih-item circle effect right_to_left">
                    <a title="前往柳勇的主页" class="blog-button">
                        <div class="img"><img th:src="@{/images/avatar.jpg}" alt="img"></div>
                        <div class="info">
                            <div class="info-back">
                                <h2>
                                    <p>lygoup@163.com</p>
                                </h2>
                                <p style="margin-top: 30px">Base on Java</p>
                            </div>
                        </div>
                    </a>
                </div>
                <!-- 头像效果-end -->
                <h1 class="panel-cover__title panel-title">
                    <a th:href="@{/index}" title="link to homepage for 柳勇" class="blog-button addColor">柳勇</a>
                </h1>
                <span class="panel-cover__subtitle panel-subtitle"><font color="#a3a3a3">个人站</font></span>
                <hr class="panel-cover__divider"/>
                <p class="panel-cover__description" style="color: white">博观而约取，厚积而薄发</p>
                <hr class="panel-cover__divider panel-cover__divider--secondary"/>
                <div class="navigation-wrapper">
                    <div>
                        <nav class="cover-navigation cover-navigation--primary">
                            <ul class="navigation">
                                <li class="navigation__item">
                                    <a class="blog-button" th:href="@{/index}" title="" >博客主页</a>
                                </li>
                                <li class="navigation__item">
                                    <a th:href="@{/allArticle}" title="archive">所有文章</a>
                                </li>
                                <li class="navigation__item">
                                    <a th:href="@{/label}" title="tags">标签</a>
                                </li>
                                <li class="navigation__item">
                                    <a th:href="@{/TechSupport}" title="support">技术支持</a>
                                </li>
                                <li class="navigation__item">
                                    <a th:href="@{/aboutme}" title="about">关于我</a>
                                </li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="panel-cover--overlay cover-clear"></div>
</header>
<div class="content-wrapper">
    <div class="content-wrapper__inner">
        <head>
            <link rel="stylesheet" th:href="@{/css/post.css}">
        </head>
        <article class="post-container post-container--single">
            <header class="post-header">
                <h1 class="post-title" th:text="${title}"></h1>
                <div class="containerS" style="margin-left: 60%; position: absolute">
                    <div class="contentBoxS">
                        <div class="btnBoxS">
                            <div id="btn" isopen="off"></div>
                            <span class="on" style="font-family: 'Helvetica Neue'">纯白</span>
                            <span class="off">护眼</span>
                        </div>
                    </div>
                </div>
                <div class="post-meta">
                    <img th:src="@{/images/calendar.png}" width="20px"/>
                    <time th:text="${#dates.format(blogTime,'yyyy-MM-dd')}"
                          datetime="2021-07-11 00:00:00 +0800" itemprop="datePublished" class="post-meta__date date">
                    </time>
                    <span id="busuanzi_container_page_pv"> | 阅读：
                        <span th:text="${readNum}" id="busuanzi_value_page_pv"></span>次
                    </span>
                </div>
            </header>
            <p th:utext="${detail}"></p>

        </article>
        <section>
            <div class="content-play">
                <p><a style="line-height: 5px;font-size: 5px" href="javascript:void(0)" onclick="dashangToggle()"
                      class="dashang" title="打赏，支持一下">打赏一个呗</a></p>
                <div class="hide_box-play"></div>
                <div class="shang_box-play">
                    <a class="shang_close-play" href="javascript:void(0)" onclick="dashangToggle()" title="关闭">
                        <img th:src="@{/images/close.jpg}" alt="取消"/>
                    </a>
                    <div class="shang_tit-play">
                        <p>感谢您的支持，我会继续努力的!</p>
                    </div>
                    <div class="shang_payimg">
                        <img th:src="@{/images/alipayimg.jpg}" alt="扫码支持" title="扫一扫"/>
                    </div>
                    <div style="width: 50px" class="shang_payimg">
                    </div>
                    <div class="shang_payimg">
                        <img th:src="@{/images/weipayimg.jpg}" alt="扫码支持" title="扫一扫"/>
                    </div>
                    <div class="pay_explain">扫码打赏，你说多少就多少</div>
                    <div class="shang_payselect">
                        <div class="pay_item checked" data-id="alipay">
                            <span class="pay_logo">
                                <img th:src="@{/images/alipay.jpg}" alt="支付宝"/>
                            </span>
                        </div>
                        <div class="pay_item" data-id="weipay">
                            <span class="pay_logo">
                                <img th:src="@{/images/wechat.jpg}" alt="微信"/>
                            </span>
                        </div>
                    </div>
                    <div class="shang_info-play">
                        <p>
                            打开<span id="shang_pay_txt">支付宝</span>扫一扫，即可进行扫码打赏哦
                        </p>
                    </div>
                </div>

                <!--我的自定义弹出式表单start-->
                <div class="hide_box-setting"></div>
                <div class="shang_box-setting">
                    <a class="shang_close-play" href="javascript:void(0)" onclick="settingToggle()" title="关闭">
                        <img th:src="@{/images/close.jpg}" alt="取消"/>
                    </a>
                    <!--在这里写表单，建议使用UI框架-->
                    <div class="shang_tit-play">
                        <p>回复设置</p>
                    </div>
                    <div class="shang_info-play">
                        <p>
                            编辑你回复的个人信息：<br><br>
                        </p>
                    </div>
                    <!--头像展示，未来不需要更改-->
                    <div class="field" style="width: 300px;margin: 0 auto">
                        你喜欢哪个头像？<br><br>
                        <input type="radio" id="radio1" name="avatar" value="/images/avatar/avatar13.jpg">
                        <img style="height: 50px;width: 50px;border-radius:50%" th:src="@{/images/avatar/avatar13.jpg}"
                             onclick="radio1.checked=true">
                        <input type="radio" id="radio2" name="avatar" value="/images/avatar/avatar14.jpg">
                        <img style="height: 50px;width: 50px;border-radius:50%" th:src="@{/images/avatar/avatar14.jpg}"
                             onclick="radio2.checked=true">
                        <input type="radio" id="radio3" name="avatar" value="/images/avatar/avatar15.jpg">
                        <img style="height: 50px;width: 50px;border-radius:50%" th:src="@{/images/avatar/avatar15.jpg}"
                             onclick="radio3.checked=true">
                        <input type="radio" id="radio4" name="avatar" value="/images/avatar/avatar16.jpg">
                        <img style="height: 50px;width: 50px;border-radius:50%" th:src="@{/images/avatar/avatar16.jpg}"
                             onclick="radio4.checked=true">
                        <br>
                        <input type="radio" id="radio5" name="avatar" value="/images/avatar/avatar9.jpg">
                        <img style="height: 50px;width: 50px;border-radius:50%" th:src="@{/images/avatar/avatar9.jpg}"
                             onclick="radio5.checked=true">
                        <input type="radio" id="radio6" name="avatar" value="/images/avatar/avatar10.jpg">
                        <img style="height: 50px;width: 50px;border-radius:50%" th:src="@{/images/avatar/avatar10.jpg}"
                             onclick="radio6.checked=true">
                        <input type="radio" id="radio7" name="avatar" value="/images/avatar/avatar11.jpg">
                        <img style="height: 50px;width: 50px;border-radius:50%" th:src="@{/images/avatar/avatar11.jpg}"
                             onclick="radio7.checked=true">
                        <input type="radio" id="radio8" name="avatar" value="/images/avatar/avatar12.jpg">
                        <img style="height: 50px;width: 50px;border-radius:50%" th:src="@{/images/avatar/avatar12.jpg}"
                             onclick="radio8.checked=true">
                        <br>
                        <input type="radio" id="radio9" name="avatar" value="/images/avatar/avatar17.jpg">
                        <img style="height: 50px;width: 50px;border-radius:50%" th:src="@{/images/avatar/avatar17.jpg}"
                             onclick="radio9.checked=true">
                        <input type="radio" id="radio10" name="avatar" value="/images/avatar/avatar18.jpg">
                        <img style="height: 50px;width: 50px;border-radius:50%" th:src="@{/images/avatar/avatar18.jpg}"
                             onclick="radio10.checked=true">
                        <input type="radio" id="radio11" name="avatar" value="/images/avatar/avatar19.jpg">
                        <img style="height: 50px;width: 50px;border-radius:50%" th:src="@{/images/avatar/avatar19.jpg}"
                             onclick="radio11.checked=true">
                        <input type="radio" id="radio12" name="avatar" value="/images/avatar/avatar20.jpg">
                        <img style="height: 50px;width: 50px;border-radius:50%" th:src="@{/images/avatar/avatar20.jpg}"
                             onclick="radio12.checked=true">
                        <br><br>
                        <label>昵称:</label>
                        <input id="replyName" maxlength="15" ax type="text" name="replyName" value="游客"
                               placeholder="回复昵称">
                    </div>
                    <br>
                    <button style="margin-left: 140px" id="replyButton" class="ui button" type="submit">确定</button>
                </div>
            </div>
            <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
            </div>
            <!--弹出式菜单样式-->
            <style type="text/css">
                .content-play {
                    width: 80%;
                    margin-top: 20px;
                    margin-bottom: 10px;
                    height: 40px;
                }

                .hide_box-setting {
                    z-index: 999;
                    filter: alpha(opacity=50);
                    background: #666;
                    opacity: 0.5;
                    -moz-opacity: 0.5;
                    left: 0;
                    top: 0;
                    height: 99%;
                    width: 100%;
                    position: fixed;
                    display: none;
                }

                .hide_box-play {
                    z-index: 999;
                    filter: alpha(opacity=50);
                    background: #666;
                    opacity: 0.5;
                    -moz-opacity: 0.5;
                    left: 0;
                    top: 0;
                    height: 99%;
                    width: 100%;
                    position: fixed;
                    display: none;
                }

                .shang_box-setting {
                    width: 390px;
                    height: 540px;
                    padding: 10px;
                    background-color: #fff;
                    border-radius: 10px;
                    position: fixed;
                    z-index: 1000;
                    left: 50%;
                    top: 50%;
                    margin-left: -195px;
                    margin-top: -280px;
                    border: 1px dotted #dedede;
                    display: none;
                }

                .shang_box-play {
                    width: 540px;
                    height: 540px;
                    padding: 10px;
                    background-color: #fff;
                    border-radius: 10px;
                    position: fixed;
                    z-index: 1000;
                    left: 50%;
                    top: 50%;
                    margin-left: -280px;
                    margin-top: -280px;
                    border: 1px dotted #dedede;
                    display: none;
                }

                .shang_box-play img {
                    border: none;
                    border-width: 0;
                }

                .dashang {
                    display: block;
                    width: 100px;
                    margin: 5px auto;
                    height: 25px;
                    line-height: 25px;
                    padding: 10px;
                    background-color: #E74851;
                    color: #fff;
                    text-align: center;
                    text-decoration: none;
                    border-radius: 10px;
                    font-weight: bold;
                    font-size: 16px;
                    transition: all 0.3s;
                }

                .dashang:hover {
                    opacity: 0.8;
                    padding: 15px;
                    font-size: 18px;
                }

                .shang_close-play {
                    float: right;
                    display: inline-block;
                    margin-right: 10px;
                    margin-top: 20px;
                }

                .shang_logo {
                    display: block;
                    text-align: center;
                    margin: 20px auto;
                }

                .shang_tit-play {
                    width: 100%;
                    height: 75px;
                    text-align: center;
                    line-height: 66px;
                    color: #a3a3a3;
                    font-size: 16px;
                    background: url("../images/cy-reward-title-bg.jpg");
                    font-family: 'Microsoft YaHei';
                    margin-top: 7px;
                    margin-right: 2px;
                }

                .shang_tit-play p {
                    color: #a3a3a3;
                    text-align: center;
                    font-size: 16px;
                }

                .shang_payimg {
                    width: 140px;
                    padding: 10px;
                    padding-left: 80px; /*border:6px solid #EA5F00;**/
                    margin: 0 auto;
                    border-radius: 3px;
                    height: 140px;
                    display: inline-block;
                }

                .shang_payimg img {
                    display: inline-block;
                    margin-right: 10px;
                    float: left;
                    text-align: center;
                    width: 140px;
                    height: 140px;
                }

                .pay_explain {
                    text-align: center;
                    margin: 10px auto;
                    font-size: 12px;
                    color: #545454;
                }

                .shang_payselect {
                    text-align: center;
                    margin: 0 auto;
                    margin-top: 40px;
                    cursor: pointer;
                    height: 60px;
                    width: 500px;
                    margin-left: 110px;
                }

                .shang_payselect .pay_item {
                    display: inline-block;
                    margin-right: 140px;
                    float: left;
                }

                .shang_info-play {
                    clear: both;
                }

                .shang_info-play p, .shang_info-play a {
                    color: #C3C3C3;
                    text-align: center;
                    font-size: 12px;
                    text-decoration: none;
                    line-height: 2em;
                }
            </style>
            <ul>
                <li class="previous">
                    <!--这里逻辑我也没完全搞懂，但是就是有效，应该是不加/的话会改变当前页面的请求参数-->
                    <a th:href="@{${lastBlog == null ? '#' : lastBlog.getBlogId()}}" title="上一篇">上一篇：
                        <span th:text="${lastBlog == null ? '没有上一篇啦~':lastBlog.getTitle()}"></span></a>
                </li>
                <li class="next">
                    <a th:href="@{${nextBlog == null ? '#' : nextBlog.getBlogId()}}" title="下一篇">下一篇：
                        <span th:text="${nextBlog == null ? '没有下一篇啦~':nextBlog.getTitle()}"></span>
                    </a>
                </li>
            </ul>

        </section>
        <!--评论区start-->
        <section class="post-comments">
            <div class="ui comments">
                <h1></h1>
                <h3 style="background-color: whitesmoke;line-height: 30px;font-size: 15px" class="ui dividing header">
                    写个评论吧~</h3>
                <div class="comment" th:each="comment:${commentsList}">
                    <a class="avatar">
                        <img style="border-radius:50%" th:src="${comment.getAvatarPath()}">
                    </a>
                    <div class="content">
                        <a class="author" th:text="${comment.getComName()}"></a>
                        <div class="metadata">
                            <span class="date"><font color="rgb(179,179,179)" th:text="${#dates.format(comment.getComTime(),'yyyy-MM-dd HH:mm')}">今天下午 5:42</font></span>
                        </div>
                        <div class="text" style="line-height: 20px" th:text="${comment.getComment()}"></div>
                        <div class="actions">
                            <a class="reply">Reply</a>
                        </div>
                    </div>
                    <!--评论嵌套-->
                    <!--<div class="comments">
                        <div class="comment">
                            <a class="avatar">
                                <img th:src="@{/images/avatar.jpg}">
                            </a>
                            <div class="content">
                                <a class="author">Jenny Hess</a>
                                <div class="metadata">
                                    <span class="date">刚刚</span>
                                </div>
                                <div class="text">艾略特你永远是多么正确 :) </div>
                                <div class="actions">
                                    <a class="reply">Reply</a>
                                </div>
                            </div>
                        </div>
                    </div>-->
                </div>

            </div>
            <form class="ui reply form" th:action="@{/details/reply}" method="post">
                <input type="hidden" name="blogId" th:value="${blogId}">
                <input type="hidden" id="replyName2" name="replyName" value="游客">
                <input type="hidden" id="avatarPath" name="avatarPath" value="/images/avatar/avatar17.jpg">
                <div class="field">
                    <label>
                        <textarea maxlength="250" name="comment" required="required"></textarea>
                    </label>
                </div>
                <div class="ui blue labeled submit icon button addColor" onclick="settingToggle()">
                    <i class="icon edit"></i> 设置
                </div>
                <button class="ui blue labeled submit icon button addColor">
                    <i class="icon edit"></i> 发送
                </button>
            </form>
        </section>
    </div>
    </section>
    <!--评论区end-->
    <section class="footer">
        <footer>
            <div class="footer_div">
                <nav class="cover-navigation navigation--social">
                    <ul class="navigation">
                        <!-- Email -->
                        <li class="navigation__item_social">
                            <a href="mailto:lygoup@163.com" title="Contact me">
                                <img th:src="@{/images/email.png}" style="width: 30px" height="30px" alt="email">
                                <!--<div class="footer-social-icon" style="background:url('../images/email.png');width: 30px;height: 30px"></div>-->
                            </a>
                        </li>
                        <!-- CSDN -->
                        <li class="navigation__item_social">
                            <a href="https://blog.csdn.net/weixin_44773580" title="csdn">
                                <img th:src="@{/images/csdn.png}" style="width: 30px" height="30px" alt="email">
                                <!--<div class="footer-social-icon" style="background:url('../images/email.png');width: 30px;height: 30px"></div>-->
                            </a>
                        </li>
                        <!-- GitHub -->
                        <li class="navigation__item_social">
                            <a href="https://github.com/letme5/letme5.github.io" title="github">
                                <img th:src="@{/images/github.png}" style="width: 30px" height="30px" alt="email">
                                <!--<div class="footer-social-icon" style="background:url('../images/email.png');width: 30px;height: 30px"></div>-->
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
            <div class="footer_div">
                <p style="font-size: 12px; color: rgb(179,179,179)" class="copyright text-muted">
                    Copyright &copy; LiuYong 2021 | Theme by <a href="mailto:lygoup@163.com">lygoup@163.com</a>
                </p>
                <div align="right">
                    <link rel="stylesheet" th:href="@{/css/font-awesome.min-1.css}">
                </div>
                <br><br>
            </div>
        </footer>
    </section>
</div>
<script>
    let btn = document.querySelector("#replyButton"),//获得button元素
        replyName = document.querySelector("#replyName"),//获得弹出菜单填写的昵称
        avatarPath = document.querySelector("#avatarPath"),//获得隐藏提交表单的头像路径
        replyName2 = document.querySelector("#replyName2");//获得隐藏提交表单的昵称
    btn.onclick = function () {
        $(".hide_box-setting").fadeToggle();//弹出菜单的显示和隐藏，不要删除
        $(".shang_box-setting").fadeToggle();
        if (replyName.value) {

            $('input:radio:checked').each(function () {//循环遍历radio，获得被选中radio的value值
                const checkValue = $(this).val();
                avatarPath.value = checkValue;//将选中radio的值赋给隐藏表单的value
                console.log($(this).val());　　// 选中框中的值
            });

            replyName2.value = replyName.value;//将弹出菜单填写的value赋值给表单的隐藏input
        } else {
            alert("你尚未输入信息,请重新输入")
        }
    }
</script>
<script type="text/javascript" th:src="@{/js/jquery-1.11.1.min.js}"></script>
<script type="text/javascript" th:src="@{/js/main.js}"></script>
<script type="text/javascript" th:src="@{/js/highlight.pack.js}"></script>
<!--纯白/护眼begin-->
<script>
    function isNullOrEmpty(value) {
        return !!((value === null || value === '' || value === undefined));
    }
    let store;
    $(function () {
        let store = {
            // 首次加载，按钮为关闭状态
            flag: false,
            // 开启按钮
            bodyColorOn: 'white', // 全局字体颜色
            bodyBackgroundColorOn: 'rgb(51,51,51)', // 全局背景色
            h1ColorOn: "white", // h1标签字体颜色
            spanColorOn: "white", // span标签字体颜色
            divColorOn: "white", // div标签字体颜色
            buttonColorOn: "white", // button标签字体颜色
            h3ColorOn: "white", // h3标签字体颜色
            h3BackgroundOn: "rgb(49,53,55)", // h3标签背景颜色
            textareaColorOn: "white", // textarea标签字体颜色
            textareaBackgroundOn: "white", // textarea标签背景颜色
            addColorOn: 'white',
            // 关闭按钮
            bodyColorOff: 'black', // 全局字体颜色
            bodyBackgroundColorOff: 'white', // 全局背景色
            h1ColorOff: "black", // h1标签字体颜色
            spanColorOff: "black", // span标签字体颜色
            divColorOff: "black", // div标签字体颜色
            buttonColorOff: "white", // button标签字体颜色
            h3ColorOff: "black", // h3标签字体颜色
            h3BackgroundOff: "rgb(185,211,238)", // h3标签背景颜色
            textareaColorOff: "black", // textarea标签字体颜色
            textareaBackgroundOff: "white", // textarea标签背景颜色
            addColorOff: 'black'
        };
        let data = localStorage.getItem('store')
        if (!isNullOrEmpty(data)) {
            store = JSON.parse(localStorage.getItem('store'));
            // 页面首次加载，会拿到本地的flag
            // 首次加载页面
            if (store.flag) {
                store.flag = true
                localStorage.setItem('store', JSON.stringify(store));
                $("#btn").attr("isopen", "on").animate({
                    left: '38px'
                });
                $(".btnBoxS").removeClass('changeColorOn');
                $(".btnBoxS").addClass('changeColorTurn');
                // 开关为true
                $("body").css({
                    backgroundColor: store.bodyBackgroundColorOn,
                    color: store.bodyColorOn
                });
                $("h1").css({
                    color: store.h1ColorOn
                });
                $("span").css({
                    color: store.spanColorOn
                });
                $("div").css({
                    color: store.divColorOn
                });
                $(".addClass").addClass('addColorOn');
                $("button").css({
                    color: store.buttonColorOn
                });
                $("h3").css({
                    color: store.h3ColorOn,
                    background: store.h3BackgroundOn
                });
                $("textarea").css({
                    color: store.textareaColorOn,
                    background: store.textareaBackgroundOn,
                });
                $(".on").css("display", "inline-block");
                $(".off").css("display", "none");
            } else {
                store.flag = false
                localStorage.setItem('store', JSON.stringify(store));
                $("#btn").attr("isopen", "off").animate({
                    left: "3px"
                });
                $(".btnBoxS").removeClass('changeColorTurn');
                $(".btnBoxS").addClass('changeColorOn');
                // 开关为false
                $("body").css({
                    backgroundColor: store.bodyBackgroundColorOff,
                    color: 'green'
                });
                $("h1").css({
                    color: store.h1ColorOff
                });
                $("span").css({
                    color: store.spanColorOff
                });
                $("div").css({
                    color: store.divColorOff
                });
                $(".addClass").addClass('addColorOff');
                $("textarea").css({
                    color: store.textareaColorOff,
                    background: store.textareaBackgroundOff
                });
                $("h3").css({
                    color: store.h3ColorOff,
                    background: store.h3BackgroundOff
                });
                $("button").css({
                    color: store.buttonColorOff
                });
                $(".on").css("display", "none");
                $(".off").css("display", "inline-block");
            }
        } else {
            store.flag = false
            localStorage.setItem('store', JSON.stringify(store));
            $("#btn").attr("isopen", "off").animate({
                left: "3px"
            });
            $(".btnBoxS").removeClass('changeColorTurn');
            $(".btnBoxS").addClass('changeColorOn');
            // 开关为false
            $("body").css({
                backgroundColor: store.bodyBackgroundColorOff,
                color: 'green'
            });
            $("h1").css({
                color: store.h1ColorOff
            });
            $("span").css({
                color: store.spanColorOff
            });
            $("div").css({
                color: store.divColorOff
            });
            $(".addClass").addClass('addColorOff');
            $("textarea").css({
                color: store.textareaColorOff,
                background: store.textareaBackgroundOff
            });
            $("h3").css({
                color: store.h3ColorOff,
                background: store.h3BackgroundOff
            });
            $("button").css({
                color: store.buttonColorOff
            });
            $(".on").css("display", "none");
            $(".off").css("display", "inline-block");
        }
        // 点击按钮
        $(".contentBoxS").on("click", function () {
            if ($("#btn").attr("isopen") == "off") {
                $("#btn").attr("isopen", "on").animate({
                    left: '38px'
                });
                store.flag = true
                localStorage.setItem('store', JSON.stringify(store));
                // $(".btnBoxS").css("background-color", "#409EFF");
                $(".btnBoxS").removeClass('changeColorOn');
                $(".btnBoxS").addClass('changeColorTurn');
                // 按钮为true
                $("body").css({
                    backgroundColor: store.bodyBackgroundColorOn,
                    color: store.bodyColorOn
                });
                $("h1").css({
                    color: store.h1ColorOn
                });
                $("span").css({
                    color: store.spanColorOn
                });
                $("div").css({
                    color: store.divColorOn
                });
                $(".addClass").addClass('addColorOn');
                $("button").css({
                    color: store.buttonColorOn
                });
                $("h3").css({
                    color: store.h3ColorOn,
                    background: store.h3BackgroundOn
                });
                $("textarea").css({
                    color: store.textareaColorOn,
                    background: store.textareaBackgroundOn,
                });
                $(".on").css("display", "inline-block");
                $(".off").css("display", "none");
            } else if ($("#btn").attr("isopen") == "on") {
                $("#btn").attr("isopen", "off").animate({
                    left: "3px"
                });
                store.flag = false
                localStorage.setItem('store', JSON.stringify(store));
                // $(".btnBoxS").css("background-color", "white");
                $(".btnBoxS").removeClass('changeColorTurn');
                $(".btnBoxS").addClass('changeColorOn');
                // 按钮为false
                $("body").css({
                    backgroundColor: store.bodyBackgroundColorOff,
                    color: store.bodyColorOff

                });
                $("h1").css({
                    color: store.h1ColorOff
                });
                $("span").css({
                    color: store.spanColorOff
                });
                $("div").css({
                    color: store.divColorOff
                });
                $(".addClass").addClass('addColorOff');
                $("textarea").css({
                    color: store.textareaColorOff,
                    background: store.textareaBackgroundOff
                });
                $("h3").css({
                    color: store.h3ColorOff,
                    background: store.h3BackgroundOff
                });
                $("button").css({
                    color: store.buttonColorOff
                });
                $(".on").css("display", "none");
                $(".off").css("display", "inline-block");
            }
        })
    })
</script>
<!--纯白/护眼end-->

</body>
</html>
